<template>
  <view class="count-card" :class="info.phone ? curVipConf.bgClass : ''">
    <view class="count-vip" v-if="info.phone">
      <image :src="curVipConf.icon" mode="widthFix" style="width: 80rpx; height: 80rpx" @click="toMember" />
      <view class="vip-con" :class="curVipConf.textClass" @click="toMember">
        <view>{{memberInfo.title || '未开通会员'}}</view>
        <view class="vip-text">{{curVipConf.expiration || memberInfo?.end_time + '到期'}}<text v-if="memberInfo.day_look">，今日剩余{{memberInfo.day_look}}次</text> </view>
      </view>
      <view class="vip-contact" :class="curVipConf.btnClass" hover-class="hover-active" @click="toServe">{{curVipConf.btnText || '联系管家'}}</view>
    </view>
    <view class="count-con" :class="info.phone && memberInfo?.title ? 'hasVip-con' : 'no-vip-con'">
      <view class="c-box" v-for="(item, index) in labels" :key="index" hover-class="hover-active" @click="clickFn(item.value)">
        <!-- <uni-badge :is-dot="true" :text="gzhStatus ? 0 : 1" absolute="rightTop" size="small" v-if="item.isDot" :custom-style="dotStyle">
          <view class="is-dot-text" v-if="!gzhStatus">未开启</view>
          <view class="is-not-dot-text" v-else>已开启</view>
        </uni-badge> -->

        <uni-badge :is-dot="true" :text="1" absolute="rightTop" size="small" v-if="item.isDot" :custom-style="dotStyle">
          <view class="is-dot-text">关注公众号</view>
        </uni-badge>
        <view v-else>{{countInfo[item.value] || 0}}</view>
        <view class="box-text">{{item.label}}</view>
      </view>
    </view>
  </view>
</template>
 
<script setup>
import vipIcon0 from "@/static/my/no-vip.svg";
import vipIcon1 from "@/static/my/z-vip.svg";
import vipIcon2 from "@/static/my/f-vip.svg";
import vipIcon3 from "@/static/my/n-vip.svg";
import vipIcon4 from "@/static/my/j-vip.svg";
import { msgPageEnum } from "@/enum";
import useStore from "@/store";
const { app, common } = useStore();

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});

// data + method
const dotStyle = shallowReactive({
  background: "#FF000B",
  border: "2rpx solid #FFFFFF",
});

const vipConfs = shallowReactive({
  至尊会员: {
    icon: vipIcon1,
    expiration: "永久有效",
    bgClass: "z-vip-bg",
  },
  永久会员: {
    icon: vipIcon2,
    expiration: "永久有效",
    bgClass: "f-vip-bg",
  },
  年度会员: {
    icon: vipIcon3,
    expiration: "",
    bgClass: "n-vip-bg",
  },
  季度会员: {
    icon: vipIcon4,
    expiration: "",
    bgClass: "j-vip-bg",
  },
});

const labels = reactive([
  ...msgPageEnum.getOptions(),
  {
    isDot: true,
    label: "通知状态",
    value: "isNotice",
  },
]);
// computed
const memberInfo = computed(() => props.info?.member || {});
const countInfo = computed(() => props.info?.count || {});
const curVipConf = computed(() => {
  const noMember = {
    icon: vipIcon0,
    expiration: "开通会员，打电话不限次数",
    bgClass: "no-vip-bg",
    btnClass: "no-vip-btn",
    textClass: "no-vip-text",
    btnText: "立即开通",
  };
  return vipConfs[memberInfo.value.title] || noMember;
});

// 公众号关注状态
const gzhStatus = computed(() => app.gzhStatus);

const clickFn = (t) => {
  const { appLogin, phone } = props.info;
  if (!appLogin) {
    uni.navigateTo({ url: "/subPages/register/index" });
    return;
  }
  if (!phone) {
    const data = {
      title: "您还未登记联系方式",
      content: "其他亲家无法联系您",
      btnText: "立即登记",
      handleFn: () => {
        common.updatePopupOpen(false, "prompt");
        setTimeout(() => {
          uni.navigateTo({ url: "/subPages/register/contact" });
        }, 100);
      },
    };
    common.updatePromptParams(data);
    common.updatePopupOpen(true, "prompt");
    return;
  }
  if (t == "isNotice") {
    // uni.navigateTo({ url: "/subPages/notice/index" });
    uni.navigateTo({ url: "/subPages/gzhpage/index" });
  } else {
    uni.navigateTo({ url: "/subPages/message/index?pageType=" + t });
  }
};

const toServe = () => {
  if (!memberInfo.value?.title) {
    uni.navigateTo({ url: "/subPages/purchase/index" });
    return;
  }
  uni.navigateTo({ url: "/subPages/serve/index" });
};

const toMember = () => {
  uni.navigateTo({ url: "/subPages/member/index" });
};
</script>
 
<style lang='scss' scoped>
.count-card {
  border-radius: 30rpx 30rpx 50rpx 50rpx;
  margin: 20rpx;
  background: #fff;
  .count-con {
    padding: 60rpx 20rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40rpx;
    background: #fff;
  }
  .hasVip-con {
    background: url("@/static/my/vip-con.png") no-repeat center / cover;
  }
  .c-box {
    font-weight: bold;
    font-size: 48rpx;
    color: #000;
    text-align: center;
  }

  .box-text {
    font-size: 28rpx;
    font-weight: normal;
    color: #666;
  }

  .is-dot-text {
    font-weight: 800;
    color: #b65f14;
    font-size: 32rpx;
  }

  .is-not-dot-text {
    font-weight: 800;
    color: #64b748;
    font-size: 32rpx;
  }
}
.count-vip {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  color: #fff;
  .vip-con {
    flex: 1;
    margin-left: 10rpx;
    font-weight: bold;
    font-size: 32rpx;
    .vip-text {
      font-weight: 500;
      font-size: 24rpx;
    }
  }

  .vip-contact {
    width: 160rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 40rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #fff;
  }
}

.z-vip-bg {
  background: linear-gradient(90deg, #666666 0%, #000000 100%);
}
.f-vip-bg {
  background: linear-gradient(90deg, #a8b3c4 0%, #707e91 100%);
}
.n-vip-bg {
  background: linear-gradient(90deg, #fec35b 0%, #f48f00 100%);
}
.j-vip-bg {
  background: linear-gradient(90deg, #ff8580 0%, #ff5c55 100%);
}
.no-vip-bg {
  background: linear-gradient(90deg, #f8dbc3 0%, #f5cfa0 100%);
}
.no-vip-text {
  color: #7f420d;
}
.no-vip-btn {
  background: linear-gradient(90deg, #cc7021 0%, #a5520a 100%) !important;
}
.no-vip-con {
  border-radius: 30rpx;
}
</style>